<!--<template>
      <div  class="financialData">
           <div class="titleInfor">
                 <ul>
                     <li>
                        <span>账户余额：{{titleInfor.countMoney}}</span>
                        <span>
                          <el-button type="text">充值</el-button>
                          <el-button type="text">提现</el-button>
                          <el-button type="text">绑定</el-button>
                        </span>
                      </li>
                      <li>
                        <span>返利余额：{{titleInfor.fanMoney}}</span>
                        <span>
                          <el-button type="text">充值</el-button>
                          <el-button type="text">暂停</el-button>
                          <el-button type="text">开始</el-button>
                        </span>
                      </li>
                      <li>
                           <span>本月返利：{{titleInfor.benMoney}}</span>
                           <span>
                          </span>
                      </li>
                 </ul>
                 <ul>
                      <li><span>本月营收：{{titleInfor.bencash}} {{titleInfor.bencashli}}</span><span>本月返利：{{titleInfor.getli}} {{titleInfor.getlili}}</span></li>
                 </ul>
                 <ul>
                      <li>
                        <span> 
                          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
                          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
                        </span>
                        <span>
                              <el-radio v-model="titleInfor.radio" label="1">周报表</el-radio>
                              <el-radio v-model="titleInfor.radio" label="2">月度报表</el-radio>
                              <el-radio v-model="titleInfor.radio" label="3">季度报表</el-radio>
                              <el-radio v-model="titleInfor.radio" label="4">年度报表</el-radio>
                        </span>
                      </li>
                 </ul>
           </div>
           <div style="width: 960px;height:284px;" ref="financialChart"></div>
           <div class="coustomer">
                 <ul>
                     <li>本月客户：</li>
                     <li>
                          客户名称：<el-input style="width:128px;margin-right: 55px;" placeholder="单行输入"></el-input>
                          查询日期：<el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
                                   <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
                                   <el-button type="primary">搜索</el-button>
                      </li>
                 </ul>
           </div>
           <div style="width: 960px;height:284px;" ref="customerChart"></div>
      </div>
      
</template>
<script>
import echarts from 'echarts'
  export default{
  data(){
    return{
        titleInfor:{
              countMoney:'￥6999.99',
              fanMoney:'￥6999.99',
              benMoney:'￥6999.99',
              bencash:'￥6999.99',
              bencashli:'10%↑',
              getli:'￥6999.99',
              getlili:'10%↑',
              radio:'2'
        }
    }
  },
    mounted() {
      this.chreatEchartFinancial()
      this.chreatEchartCustomer()
      this.chreatStoreChart()
    },
    methods: {
      chreatEchartFinancial() {
        const el = this.$refs.financialChart
        const myChart = echarts.init(el)
                // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['2011', '2012', '2013', '2014', '2015', '2016']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [720, 832, 901, 1034, 1190, 1230],
              type: 'line'
          }],
          color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      chreatEchartCustomer() {
        const el = this.$refs.customerChart
        const myChart = echarts.init(el)
                // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['2011', '2012', '2013', '2014', '2015', '2016']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [720, 832, 901, 1034, 1190, 1230],
              type: 'line'
          }],
          color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      chreatStoreChart () {
        const el = this.$refs.storeChart
        const myChart = echarts.init(el)
        // 指定图表的配置项和数据
        var option = {
          title : {
            text: '店铺销售数据分析',
            subtext: '本月销售数据',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
          // color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
  }

</script>
<style lang="scss" scoped>
  .financialData{
      width:95%;
      padding:30px  20px;
      margin:0  auto;
      .titleInfor{
        background-color: #fff;
        padding:10px  20px;
        ul {
          border-bottom:1px  #bdbdbd  solid;
          li{
          list-style: none;
          line-height: 40px;
          height:40px;
          span:last-child{
            float: right;
          }
        }
      }
      ul:nth-last-child(2){
        height:50px;
        li{line-height: 50px;}
      }
      ul:nth-last-child(1){
        height:60px;
        border:none;
        li{
           line-height: 60px;
           & /deep/{
             .el-input--prefix .el-input__inner {
                background-color: #f0f5fb;
                height:25px;
                line-height: 25px;
                border-radius:20px;
                }
           }
        }
      }
    }
    .coustomer{
      background-color: #fff;
      margin-top: 20px;
      padding: 20px 20px;
      li{
        height:40px;
        list-style: none;  
        line-height: 40px;  
        & /deep/{
                .el-input--prefix .el-input__inner ,.el-input__inner{
                background-color: #f0f5fb;
                height:25px;
                line-height: 25px;
                border-radius:20px;
        }
        .el-button{
          float:right;
        }
      }
      li:first-child{
        border-bottom:1px  #bdbdbd  solid;
      }
    }
  }
}
</style>-->
<template>
	<div class="Balance">
    <div class="count-month">
      <ul>
        <li>账户余额：￥6999.99
          <span>
            <el-button type="text">充值</el-button>
            <el-button type="text">提现</el-button>
            <el-button type="text">绑定</el-button>
          </span>
        </li>
        <li>返利余额：￥699<span>
          <el-button type="text">充值</el-button>
          <el-button type="text">暂停/开始</el-button></span>
        </li>
        <li>本月返利：￥-699</li>
      </ul>
    </div>
	  <!-- 财务报表 -->
    <el-card shadow="never" class="Balance__chart">
      <div slot="header" class="Balance__chart__top">
        <div style="float:right;">
          <span>本月返利</span>
          <span class="Balance__chart__top__data">￥6999.99</span>
          <span class="Balance__chart__top__data">10↑</span>
        </div>
        <span>本月营收</span>
        <span class="Balance__chart__top__data">￥6999.99</span>
        <span class="Balance__chart__top__data">10↑</span>
      </div>
      <div class="Balance__chart__header">
        <el-radio-group class="Balance__chart__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Balance__chart__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div style="width: 960px;height:284px;" ref="financialChart"></div>
    </el-card>

    <!-- 客户数据 -->
    <el-card shadow="never" style="margin-top:45px;" class="Balance__chart">
      <div slot="header" class="Balance__chart__top">
        <span>本月新客户</span>
        <span class="Balance__chart__top__data">12人</span>
        <span class="Balance__chart__top__data">10%↑</span>
      </div>
      <div class="Balance__chart__header">
        <div class="Balance__chart__header__right">
          <el-button type="primary">搜索</el-button>
        </div>
        <div class="Balance__chart__header__left">
          <span style="margin-right:30px;">客户名称</span>
          <el-input style="width:128px;margin-right: 55px;" placeholder="单行输入"></el-input>
          <span style="margin-right:30px;">查询日期</span>
          <el-date-picker style="width:128px;margin-right: 16px;" type="date" placeholder="起始日期"></el-date-picker>
          <span style="margin-right:16px;">到</span>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div style="width: 960px;height:284px;" ref="customerChart"></div>
    </el-card>

    <!-- 店铺销售数据 -->
    <el-card shadow="never" style="margin-top:45px;" class="Balance__chart">
      <div slot="header" class="Balance__chart__top">
        <span>店铺销售分析</span>
      </div>
      <div class="Balance__chart__header">
        <el-radio-group class="Balance__chart__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Balance__chart__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div style="width: 960px;height:384px;" ref="storeChart"></div>
    </el-card>
	</div>
</template>
<script>
import echarts from 'echarts'
  export default{
    mounted() {
      this.chreatEchartFinancial()
      this.chreatEchartCustomer()
      this.chreatStoreChart()
    },
    methods: {
      chreatEchartFinancial() {
        const el = this.$refs.financialChart
        const myChart = echarts.init(el)
                // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['2011', '2012', '2013', '2014', '2015', '2016']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [720, 832, 901, 1034, 1190, 1230],
              type: 'line'
          }],
          color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      chreatEchartCustomer() {
        const el = this.$refs.customerChart
        const myChart = echarts.init(el)
                // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['2011', '2012', '2013', '2014', '2015', '2016']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [720, 832, 901, 1034, 1190, 1230],
              type: 'line'
          }],
          color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      chreatStoreChart () {
        const el = this.$refs.storeChart
        const myChart = echarts.init(el)
        // 指定图表的配置项和数据
        var option = {
          title : {
            text: '店铺销售数据分析',
            subtext: '本月销售数据',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
          // color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
  }
</script>
<style lang="scss" >
.Balance{
  padding:20px  30px;
  &__chart {
    & /deep/ {
      .el-card__header {
        border-color: #bdbdbd;
        font-size: 18px;
      }
    }
    &__top {
      &__data {
        color: #409EFF;
        margin-left: 18px;
      }
    }
    &__header {
      line-height: 25px;
      padding-bottom: 15px;
      &__right {
        float: right;
      }
      & /deep/ {
        .el-button--primary {
          border-radius: 9px;
          width: 70px;
          padding: 5px 20px;
        }
        .el-input__icon {
          height: 25px;
          line-height: 25px;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
	        border-radius: 9px;
          border: none;
        }
        .el-radio-group {
          .is-bordered {
            padding: 0 6px;
            height: 25px;
            line-height: 25px;
            border: none;
            .el-radio__label {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }
      }
    }
  }
  .count-month{
    background-color: #ffffff;
    height: 120px;
    border-bottom: 1px  #bdbdbd solid;
    padding:10px 30px;
    ul li{
        list-style: none;
        line-height: 35px;
        height: 35px;
        span{
            float:right;
            em{
                padding: 0  10px;
                color:#409EFF;
            }
        }
    }
    & /deep/ {
      .el-button--text {
        font-size: 16px;
        padding: 7px 12px;
        vertical-align: middle;
      }
    }
  }

  .newCustomer{
    margin-top:50px;
  }
}

</style>
